<template>
  <view class="wrap">
    <uv-navbar :fixed="false" :title="body.name" safeAreaInsetTop placeholder :border='false'>
      <template v-slot:left>
        <view class="navEditName nav-left" @click="goBack">取消</view>
      </template>
      <template v-slot:right>
        <view class="navEditName nav-right" @click="tap">保存</view>
      </template>
    </uv-navbar>
    <view class="desc">向 {{ name }} 提问：</view>
    <view class="content">
      <uv-textarea v-model="base.content" placeholder="提问被回答后，将公开显示在社群内" border='none' maxlength='-1' height="100%" placeholderStyle='font-weight: 400; font-size: 32rpx; color: #B8B8B8;' textStyle='font-weight: 400; font-size: 32rpx; color: #000000;' customStyle='height: 100%'></uv-textarea>
    </view>
    <view class="footer">
      <view class="imgs" v-if="base.images.length">
        <view class="item" v-for="(item, index) in base.images" :key="index">
          <image :src="setUrl(item)" class="img" mode="aspectFill" @click="previewImage(item)"></image>
          <image src="../../../static/delete.png" class="delete" @click="imgClick(index)"></image>
        </view>
      </view>
      <view class="fasc">
        <view class="cell" @click="chooseImage">
          <image src="../../../static/uploadImage.png" class="img"></image>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    <action ref="actionPhoto" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useOrder } from '@/store';
import { post } from '@/api';
import { choose, toast, setUrl } from '@/common';
import { onLoad } from '@dcloudio/uni-app';

const storageModal = ref(null);
const modal = ref(null);
const actionPhoto = ref(null);

let id = '';
let name = ref('');
let content = ref('');
let base = ref({
  content: '',
  images: [],
})

let body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

onLoad((option) => {
  id = option.id;
  name.value = option.name;
})

function tap(){
  const params = {};
  if(base.value.images.length){
    params.images = base.value.images.toString();
  }else{
    params.images = '';
  }
  if(!base.value.content) return toast('请输入内容');
  params.content = base.value.content;
  params.association_id = body.value.id;
  params.to_user_id = id;
  
  post('api/association_question/askQuestion', params).then(res => {
    if(res.code == 1){
      toast('提问成功', true);
      const data = res.data;
      setTimeout(() => {
        uni.navigateBack({
          delta: 2
        });
      }, 1000)
    }
  })
}
// 选择图片并上传
function chooseImage(){
  if(base.value.images.length >= 9) return toast('最多上传9张');

  actionPhoto.value.open();
}
function getImageUrl(url){
  base.value.images = [...base.value.images, url];
}
// 图片预览
function previewImage(row){
  let picList = base.value.images.map(e => setUrl(e));
  uni.previewImage({
    current: setUrl(row),
    urls: picList,
  });
}
// 删除图片
function imgClick(index){
  base.value.images.splice(index, 1);
}
function goBack(){
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #fff;
  }
  .footer{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    border-top: 1px solid #F5F5F5;
    background-color: #fff;
    .imgs{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 30rpx;
      padding-top: 20rpx;
      .item{
        width: 150rpx;
        height: 150rpx;
        margin-right: 20rpx;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        position: relative;
        .delete{
          width: 24rpx;
          height: 24rpx;
          position: absolute;
          right: -12rpx;
          top: -12rpx;
        }
      }
    }
    .base{
      transition: all .5s;
      max-height: 0;
      &.scoll{
        max-height: 1500rpx;
      }
    }
    .fasc{
      width: 100%;
      padding: 40rpx 30rpx;
      display: flex;
      align-items: center;
      .cell{
        margin-right: 50rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .desc{
    font-weight: 500;
    font-size: 32rpx;
    color: #2B2B2B;
    padding: 24rpx;
    padding-bottom: 0;
  }
  .content{
    width: 100%;
    background-color: #fff;
    height: 45vh;
  }
  .navEditName{
    font-weight: 400;
    font-size: 28rpx;
    &.nav-left{
      color: #737373;
    }
    &.nav-right{
      color: #E43222;
    }
  }
</style>